<template>
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" @click="goBack" />
            <p>体检报告</p>
            <div></div>
        </header>

        <nav>
            <div :class="{ active: activeTab }" @click="setActiveTab(0)">总检结论</div>
            <div :class="{ active: activeTab === 1 }" @click="setActiveTab(1)">报告详情</div>
        </nav>

        <div class="top-ban"></div>

        <div class="nav-content-item" v-show="activeTab === 0">
            <!-- 总检结论内容 -->
            <div class="item">
                <div class="title">异常项</div>
                <ul>
                    <li v-for="(item, index) in myReportDetail.reportDetails" :key="index">
                        <div class="indications">
                            <div class="left">
                                <div>异</div>
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="right">
                                <p>{{ item.value }}</p>
                                <p>正常值范围：{{ item.normalRange }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="item" v-for="(result, index) in overallResults" :key="index">
                <div class="title">{{ result.title }}</div>
                <ul>
                    <li v-for="(content, i) in result.contents" :key="i" class="conclusion-content">
                        <h3>{{ content.subtitle }}</h3>
                        <p>{{ content.description }}</p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="nav-content-item" v-show="activeTab === 1">
            <!-- 报告详情内容 -->
            <div v-for="(section, index) in reportDetails" :key="index" class="item">
                <div class="title">{{ section.title }}</div>
                <ul>
                    <li v-for="(item, i) in section.items" :key="i">
                        <div class="indications">
                            <div class="left">
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="right">
                                <p>{{ item.value }}</p>
                                <p>正常值范围：{{ item.normalRange }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="bottom-ban"></div>
        <Footer />
    </div>
</template>
<script setup>
import Footer from '@/components/Footer.vue';
import { useRouter, useRoute } from 'vue-router';
import axios from '../plugin/axiosInstance';
import { reactive, ref, onMounted } from 'vue';
import '@/assets/css/report.css';

const router = useRouter();
const route = useRoute();
const activeTab = ref(0);

const myReportDetail = reactive({
    orderId: route.query.orderId,
    reportDetails: [],
    reportOverall: {
        errors: [],
        overallResults:[],
    },
});

const setActiveTab = (index) => {
    activeTab.value = index;
};
</script>

<style scoped>
@import '@/assets/css/report.css';
</style>